@extends('vuexy.layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy/assets/css/tables/datatable/datatables.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy/assets/css/tables/datatable/extensions/dataTables.checkboxes.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy/assets/css/pages/data-list-view.css') }}">
@stop

@section('content')
<div class="content-header row">
    <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-left mb-0">List View</h2>
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a>
                        </li>
                        <li class="breadcrumb-item"><a href="#">Data List</a>
                        </li>
                        <li class="breadcrumb-item active">List View
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
        <div class="form-group breadcrum-right">
            <div class="dropdown">
                <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-settings"></i></button>
                <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Chat</a><a class="dropdown-item" href="#">Email</a><a class="dropdown-item" href="#">Calendar</a></div>
            </div>
        </div>
    </div>
</div>
<div class="content-body">
    <!-- Data list view starts -->
    <section id="data-list-view" class="data-list-view-header">
        <div class="action-btns d-none">
            <div class="btn-dropdown mr-1 mb-1">
                <div class="btn-group dropdown actions-dropodown">
                    <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Actions
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#"><i class="feather icon-trash"></i>Delete</a>
                        <a class="dropdown-item" href="#"><i class="feather icon-archive"></i>Archive</a>
                        <a class="dropdown-item" href="#"><i class="feather icon-file"></i>Print</a>
                        <a class="dropdown-item" href="#"><i class="feather icon-save"></i>Another Action</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- DataTable starts -->
        <div class="table-responsive">
            <table class="table data-list-view">
                <thead>
                    <tr>
                        <th></th>
                        @foreach($datatable['thead'] as $item)
                        <th>{{ $item }}</th>
                        @endforeach
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <!-- DataTable ends -->

        <!-- add new sidebar starts -->
        <div class="add-new-data-sidebar">
            <div class="overlay-bg"></div>
            <div class="add-new-data">
                <div class="div mt-2 px-2 d-flex new-data-title justify-content-between">
                    <div>
                        <h4 class="text-uppercase">List View Data</h4>
                    </div>
                    <div class="hide-data-sidebar">
                        <i class="feather icon-x"></i>
                    </div>
                </div>
                <div class="data-items pb-3">
                    <div class="data-fields px-2 mt-3">
                        <div class="row">
                            <div class="col-sm-12 data-field-col">
                                <label for="data-name">Name</label>
                                <input type="text" class="form-control" id="data-name">
                            </div>
                            <div class="col-sm-12 data-field-col">
                                <label for="data-category"> Category </label>
                                <select class="form-control" id="data-category">
                                    <option>Audio</option>
                                    <option>Computers</option>
                                    <option>Fitness</option>
                                    <option>Appliance</option>
                                </select>
                            </div>
                            <div class="col-sm-12 data-field-col">
                                <label for="data-status">Order Status</label>
                                <select class="form-control" id="data-status">
                                    <option>Pending</option>
                                    <option>Canceled</option>
                                    <option>Delivered</option>
                                    <option>On Hold</option>
                                </select>
                            </div>
                            <div class="col-sm-12 data-field-col">
                                <label for="data-price">Price</label>
                                <input type="text" class="form-control" id="data-price">
                            </div>
                            <div class="col-sm-12 data-field-col data-list-upload">
                                <form action="#" class="dropzone dropzone-area" id="dataListUpload">
                                    <div class="dz-message">Upload Image</div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="add-data-footer d-flex justify-content-around px-3 mt-2">
                    <div class="add-data-btn">
                        <button class="btn btn-primary">Add Data</button>
                    </div>
                    <div class="cancel-data-btn">
                        <button class="btn btn-outline-danger">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- add new sidebar ends -->
    </section>
    <!-- Data list view end -->

</div>
@stop

@section('js')
<script src="{{ asset('vuexy/assets/js/tables/datatable/datatables.min.js') }}"></script>
<script src="{{ asset('vuexy/assets/js/tables/datatable/datatables.buttons.min.js') }}"></script>
<script src="{{ asset('vuexy/assets/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('vuexy/assets/js/tables/datatable/buttons.bootstrap.min.js') }}"></script>
<script src="{{ asset('vuexy/assets/js/tables/datatable/dataTables.select.min.js') }}"></script>
<script src="{{ asset('vuexy/assets/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
<script type="text/javascript">
    var columns = @json($datatable['columns']);
</script>
<script src="{{ asset('vuexy/assets/js/scripts/ui/data-list-view.js') }}"></script>
@stop